import React, { Fragment } from 'react';
import { connect } from 'dva';
import "./css1/div_css.css";

const s={
  "paramJson": {
    "password": "123456",
    "port": "24",
    "addr": "192.168.0.1",
    "userName": "admin"
  },
  "formContent": "[{\"label\":\"连接地址\",\"defaultValue\":\"192.168.0.1\",\"field\":\"addr\",\"type\":\"string\",\"required\":\"true\"},{\"label\":\"端口号\",\"defaultValue\":\"21\",\"field\":\"port\",\"type\":\"string\",\"required\":\"true\"},{\"label\":\"用户名\",\"defaultValue\":\"user\",\"field\":\"userName\",\"type\":\"string\",\"required\":\"true\"},{\"label\":\"密码\",\"defaultValue\":\"password\",\"field\":\"password\",\"type\":\"string\",\"required\":\"true\"}]"
}

@connect(({ basicDataModel }) => ({
  basicDataModel,
}))
class Demo1 extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      str: s,
      text:s,
    };
  }


  validateIp = (value) => {
    // 简单的IP地址验证正则
    const ipPattern = /^\s*(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
    return ipPattern.test(value);
  };

  handleBlur = (event, fieldName) => {
    // 如果fieldName是'addr'，则进行验证
    if (fieldName === 'addr') {
      const { value } = event.target;
      if (!this.validateIp(value)) {
        alert('请输入有效的IP地址');
      }
    }
  };

  // handleChange = (key) => (event) => {
  //   this.setState(prevState => ({
  //     str: {
  //       ...prevState.str,
  //       paramJson: {
  //         ...prevState.str.paramJson,
  //         [key]: event.target.value,
  //       },
  //     },
  //   }));
  // };

  handleChange = (name, value) => {
    this.setState(prevState => ({
          str: {
            ...prevState.str,
            paramJson: {
              ...prevState.str.paramJson,
              [name]: value,
            },
          },
    }),()=>{
      const{str}=this.state;
      console.log(str);
    });
  }

  handleCancel = () => {
    this.setState(prevState => ({
      str: {
        ...prevState.str,
        paramJson: {
          password: "",
          port: "",
          addr: "",
          userName: ""
        }
      }
    }));
  };

  handleConfirm=() =>{
    const{str}=this.state;
    const{str:{paramJson:{addr}}}=this.state;
    if(!this.validateIp(addr)){
      alert('请输入有效的IP地址');
      return;
    }
    this.setState({
      text: str,
    })
  }


  render() {
    const {text:{paramJson:paramJsonFromText},str:{paramJson:paramJsonFromStr},str:{formContent}}=this.state;
    const formConfig=JSON.parse(formContent);
    return (
      <form className="main">
        {formConfig.map((item) => (
          <div key={item.label} className="container">
            <label className="label"><span className="setColor">*</span>{item.label}:</label>
            <input
              type={item.type}
              value={paramJsonFromStr[item.field]}
              onChange={(event) => this.handleChange(item.field, event.target.value)}
              onBlur={(event) => this.handleBlur(event, item.field)}// 为addr添加焦点事件处理
              required={item.required === 'true'}
              className="input"
            />
          </div>
        ))}
        <div className="btn_container">
          <button type="button" className="btn_confirm" onClick={this.handleConfirm}>确定</button>
          <button type="button" className="btn_cancel" onClick={this.handleCancel}>取消</button>
        </div>
        <div>
          <textarea className="text_col" value={JSON.stringify(paramJsonFromText, null, 4)} />
        </div>
      </form>
    );
  }
}

export default Demo1;
